<script setup lang="ts">
import { Search, Refresh } from '@element-plus/icons-vue'
import { reactive } from "@vue/reactivity";
import { onMounted, ref } from 'vue';
import { IObituaryItem } from './index.interface';

const data = reactive<{list: IObituaryItem[], pageIndex: number, pageSize: number}>({
    list: [],
    pageIndex: 1,
    pageSize: 20
})

onMounted(() => {
    getList()
})

// 搜索
const searchKey = ref('');
const onSearch = () => {
    getList()
}
// 类别
const typeValue = ref('')
const optionType = ref([
    { value: 1, label: '普通凡人' },
    { value: 2, label: '孤魂野鬼' },
    { value: 3, label: '妖魔鬼怪' },
    { value: 4, label: '世间动物' }
])

// 死亡方式
const dieValue = ref('')
const optionDie = ref([
    { value: '1', label: '善终' },
    { value: '2', label: '天灾' },
    { value: '3', label: '人祸' },
    { value: '4', label: '疾病' }
])

// tabs
const radioValue = ref(1)
const onTabChange = (e: number) => {
    radioValue.value = e
    getList()
}

// 获取数据
const loading = ref(false)
const getList = () => {
    const params = {
        pageIndex: data.pageIndex,
        pageSize: data.pageSize,
        searchKey: searchKey.value,
        typeValue: typeValue.value,
        dieValue: dieValue.value,
        active: radioValue.value
    }
    loading.value = true
    setTimeout(() => {
        loading.value = false
        const arr = [];
        for(let i = 0; i < 50; i++) {
            arr.push({
                id: i + 1,
                name: '猴子猴孙' + (i + 1),
                life: 40,
                currentLife: 38,
                type: '世间动物', 
                mode: '猴子', 
                die: '善终', 
                status: radioValue.value === 1 ? '存活' : '已死亡'
            });
        }
        data.list = arr
    }, 1000);
}
const onSizeChange = (value: number) => {
    data.pageSize = value
    getList()
}
const onCurrentChange = (value: number) => {
    data.pageIndex = value
    getList()
}
</script>

<template>
    <!-- 生死簿-用户管理 -->
    <div class="obituary-user">
        <div class="z-option">
            <div class="option-left">
                <div class="option-item">
                    <el-radio-group v-model="radioValue" size="large"  @change="onTabChange">
                        <el-radio-button :label="1">生者</el-radio-button>
                        <el-radio-button :label="2">死者</el-radio-button>
                    </el-radio-group>
                </div>
                <div class="option-item">
                    <el-select v-model="typeValue" placeholder="请选择类别" size="large" clearable>
                        <el-option v-for="item in optionType" :key="item.value" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </div>
                <div class="option-item">
                    <el-input v-model="searchKey" size="large" placeholder="输入要搜索的内容" :suffix-icon="Search" />
                </div>
                <div class="option-item" v-if="radioValue !== 1">
                    <el-select v-model="dieValue" placeholder="请选择死亡方式" size="large" clearable>
                        <el-option v-for="item in optionDie" :key="item.value" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </div>
                <div class="option-item">
                    <el-button type="primary" size="large" @click="onSearch">搜索</el-button>
                </div>
            </div>
            <div class="option-right">
                <el-button type="primary" size="large" :icon="Refresh" @click="onSearch">一键恢复</el-button>
            </div>
        </div>
        <div class="z-table">
            <el-table :data="data.list" v-loading="loading" :max-height="710" size="large">
                <el-table-column prop="id" label="id"/>
                <el-table-column prop="name" label="姓名" />
                <el-table-column prop="life" label="寿命（岁）" />
                <el-table-column prop="currentLife" label="当前寿命（岁）" />
                <el-table-column prop="type" label="类别" />
                <el-table-column prop="mode" label="职业" />
                <el-table-column prop="die" label="死亡方式" v-if="radioValue === 2" />
                <el-table-column prop="status" label="状态" />
                <el-table-column label="操作" align="center" width="160" fixed="right">
                    <el-button type="primary" link>编辑</el-button>
                    <el-button type="danger" link v-if="radioValue === 1">勾魂</el-button>
                    <el-button type="danger" link v-if="radioValue === 2">还魂</el-button>
                </el-table-column>
            </el-table>
        </div>
        <div class="z-pagination">
            <el-pagination background layout="total, prev, pager, next, sizes" :total="100" :page-sizes="[10, 15, 20]" @size-change="onSizeChange" @current-change="onCurrentChange"></el-pagination>
        </div>
    </div>
</template>

<style scoped lang="scss">
.el-select {
    display: block;
}
</style>